<template>
<div style="text-align:center">
<input class="ipt" v-model="message"/>
<button class="btn" @click="appendMsg">添加</button>

<!-- <listItem v-for="(item,index) in dataList" :index="index" :text="item" :key="index"/> -->
<!-- <list-item-click v-for="(item,index) in dataList" :index="index" :text="item" :key="index"></list-item-click> -->
<listitem v-for="(item,index) in dataList" :index="index" :text="item" :key="index" @change="textChange"/>
<div v-show="dataList.length > 0">总计：{{dataList.length}}条</div>
</div>
</template>
<script>
// import Listitem from './Listitem.vue';
// import listItem from "./list-item.vue"
// import ListItemClick from './listItemClick.vue';
import listitem  from "./listitem.vue"

export default{
  components:{
    listitem
    
  },
    data(){
        return{
            message:"",
            dataList:[],
        };
    },
    methods:{
        appendMsg(){
            this.dataList.push(this.message);
        },
        textChange(text,index){
          this.$set(this.dataList,index,text)
        }
    }
}
</script>
<style scoped>
.ipt{
  height:40px;
  outline:none;
}
.btn{
  height:40px;
  background:#40b883;
  color:white;
  margin-bottom:20px;
}
.itm{
  width:200px;
  height:40px;
  line-height:40px;
  background:#40b883;
  color:white;
  border-bottom:1px solid #ccc;
  margin:0 auto;
  }
</style>